<template>
  <div class="side-tabs">
    <el-row class="row-bg padding-20" justify="space-between" align="middle">
      <el-col :span="20">
        <el-text class="mx-1" size="large" tag="b">{{ title }}</el-text>
      </el-col>
      <el-col :span="3">
        <slot name="right"></slot>
      </el-col>
      <el-text v-if="!!description" class="mx-1" type="info">Info</el-text>
    </el-row>
    <el-tabs v-model="activeTab" class="custom-tabs" tab-position="left" @tab-change="handleClick">
      <el-tab-pane v-for="item in tablist" :key="item.id" :name="item.id">
        <template #label>
          <el-row class="row-bg" justify="space-between">
            <el-col :span="18">
              {{ item.title }}
            </el-col>
            <el-col :span="5" class="icon-wrapper">
              <slot name="action" :item="item"></slot>
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-col>
          </el-row>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, watch, defineEmits } from "vue";
import { ArrowRight, Edit } from "@element-plus/icons-vue";
import SideTitle from "./side-title.vue";
const emit = defineEmits(["changeTab", "editTab"]);

const props = defineProps({
  tablist: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
  },
  description: {
    type: String,
  },
});

const activeTab = ref(null);

watch(
  () => props.tablist,
  (newValue) => {
    if (newValue.length > 0) {
      // 当 tabList 有值时执行操作
      activeTab.value = newValue[0].id;
    }
  },
  { immediate: true }
);

const handleClick = (tab) => {
  emit("changeTab", tab);
};
</script>

<style lang="scss" scoped>
.side-tabs {
  height: 100%;
  width: 100%;
  background-color: #f8f9fc;
}

.custom-tabs {
  // 设置整个tabs组件的宽度
  height: 100%;

  :deep(.el-tabs__nav) {
    width: 100%;
  }

  :deep(.el-tabs__nav-wrap) {
    &::after {
      // 移除底部的线条
      display: none;
    }
  }

  :deep(.el-tabs__header) {
    width: 100%;
  }

  :deep(.el-tabs__nav) {
    // 设置tabs导航栏的背景
    background: #f5f5f5;
    padding: 4px;
    border-radius: 4px;
  }

  :deep(.el-tabs__item) {
    display: inline-block !important;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 4px;
    transition: all 0.3s;
    text-align: left;

    // 未选中状态
    color: #666;

    &:hover {
      color: #409eff;
    }

    // 选中状态
    &.is-active {
      color: #fff !important; // 选中时的文字颜色
      background-color: #409eff; // 选中时的背景色
      font-weight: 500;
    }

    .el-row {
      width: 100%;
      align-items: center;
    }
  }

  // 去掉选中时的下划线
  :deep(.el-tabs__active-bar) {
    display: none;
  }

  .icon-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; // 图标之间的间距
  }

  .tab-icon {
    cursor: pointer;
    font-size: 14px;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
